<template>
  <div class="x-user-card">
    <div class="user-info">
      <div class="user-item" v-if="userInfo.memberName">
        <span class="x-label">名称：</span>
        <span class="x-value">{{userInfo.memberName}}</span>
      </div>
      <div class="user-item" v-if="userInfo.teamName">
        <span class="x-label">班组：</span>
        <span class="x-value">{{userInfo.teamName}}</span>
      </div>
      <div class="user-item" v-if="userInfo.typeName">
        <span class="x-label">车型：</span>
        <span class="x-value">{{userInfo.typeName}}</span>
      </div>
      <div class="user-item" v-if="userInfo.driverMemberName">
        <span class="x-label">驾驶员：</span>
        <span class="x-value">{{userInfo.driverMemberName}}</span>
      </div>
      <div class="user-item" v-if="userInfo.name">
        <span class="x-label">名称：</span>
        <span class="x-value">{{userInfo.name}}</span>
      </div>
      <div class="user-item" v-if="userInfo.cardNum">
        <span class="x-label">卡号：</span>
        <span class="x-value">{{userInfo.cardNum}}</span>
      </div>
      <div class="user-item" v-if="userInfo.code">
        <span class="x-label">车牌：</span>
        <span class="x-value">{{userInfo.code}}</span>
      </div>
      <div class="user-item">
        <span class="x-label">日期：</span>
        <span class="x-value"><el-date-picker v-model="day" :align="`right`" size="mini" :disabled="disabled" @change="onChangeDate" :clearable="false" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  placeholder="选择日期"></el-date-picker></span>
      </div>
    </div>
    <div class="work-times">
      <div class="row-item" v-for="(item,index) in timeList" :key="index" :class="{'active': active == index}" @click="changeTimes(item, index)">
        <span class="time">{{item.formatStartTime}} - {{item.formatEndTime}}</span>
        <span class="check"></span>
      </div>
    </div>

    <div class="btn-group btn-flex"  v-if="showMonitor || showPlayBtn">
      <el-button v-if="showMonitor" size="mini" :loading="loading" type="primary" @click="handleClickBtn('monitor')">查看监控</el-button>
      <el-button v-if="showPlayBtn" size="mini" :loading="loading" type="primary" @click="handleClickBtn('path')">轨迹回放</el-button>
    </div>
    <div class="btn-group btn-flex" v-if="showClock">
        <a href="javascript:;" class="btn-small" :class="{'active': clockIn}" @click="handleClickClock('in')">上班打卡位置</a>
        <a href="javascript:;" class="btn-small" :class="{'active': clockOut}" @click="handleClickClock('out')">下班打卡位置</a>
    </div>
  </div>
</template>
<script>

export default {
  props: {
    userInfo: {
      type: Object,
      default: ()=>{}
    },
    currentDay: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    },
    timeList: {
      type: Array,
      default:()=> []
    },
  },
  watch: {
    currentDay: {
      handler(nv) {
        this.day = nv;
      },
    },
    timeList: {
      handler(nv) {
        if(nv) {
          this.active = 0
        }
      },
      deep: true
    }
  },
  data() {
    const day = this.parseTime(+new Date(), '{y}-{m}-{d}')
    return {
      day: day,
      disabled: false,
      active: 0,
      showPlayBtn: false,
      showMonitor: false,
      clockIn: false,
      clockOut: false,
      showClock: false,
    }
  },
  methods: {
    handleClickBtn(flag) {
      if(this.loading) return;
      console.log("flag---", flag)
      this.$emit("handleClickBtn", flag)
    },
    onChangeDate() {
      this.$emit('change', this.day)
    },
    setDisabled(dis) {
      this.disabled = dis
    },
    changeTimes(item,index) {
      this.active = index;
      this.$emit("changeTime", index, item)
    },
    setShowPlaybtn(flag) {
        this.showPlayBtn = flag;
    },
    setShowMonitor(flag) {
        this.showMonitor = flag;
    },
    setShowClock(flag){
        this.showClock = flag;
        this.clockIn = false;
        this.clockOut = false;
    },
    handleClickClock(type) {
        if(type == 'in') {
            this.clockIn = !this.clockIn;
            this.$emit('handleClickClock', {type: 1, check: this.clockIn})
        }else{
            this.clockOut = !this.clockOut;
            this.$emit('handleClickClock', {type: 2, check: this.clockOut})
        }
    }
  }
}
</script>
<style lang="scss" scoped>
.x-user-card {
  position: absolute;
  left: 10px;
  top: 10px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  background: #fff;
  border-radius: 5px;
  width: 300px;
  font-size: 14px;
  .user-info {
    padding: 5px;
    .user-item {
      border-bottom: 1px solid #eaeaea;
      padding: 5px 10px;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      .x-label {
        color: #707070;
      }
      &:last-child {
        border-bottom:none;
      }
    }
  }

  .work-times {
    padding: 0px 10px;
    border-top: 1px solid #89a4ff73;
    .row-item {
      display: flex;
      justify-content: space-between;
      padding: 8px 10px;
      border-bottom: 1px solid #eee;
      &:last-child {
        border-bottom:none;
      }
      &:hover {
        background: #a5d9ff4e;
      }
      &.active {
        .check {
          border-color: #409eff;
          background: #409eff;
        }
      }
      .check {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 1px solid #dcdfe6;
      }
    }
  }

  .btn-group {
    border-top: 1px solid #89a4ff73;
    text-align: center;
    padding: 10px 0;
  }

  .btn-flex {
    display: flex;
    justify-content: space-evenly;
    .btn-small {
        display: inline-block;
        text-decoration: none;
        outline: none;
        color: #666;
        width: 100px;
        height: 26px;
        font-size: 12px;
        border-radius: 4px;
        line-height: 1;
        border: 1px solid #b8b8b8;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .active {
        background: #409eff;
        color: #fff;
        border-color: #409eff;
    }
  }
}
</style>
